<template>
	<view v-if="mode === 4 || mode === 3 || mode === 2" class="container">
		<view v-if="!url.length" class="add-cover" @click="toEditCover">
			<image src="@/static/img/add-cover.png" mode="aspectFit"></image>
			<text>请编辑封面</text>
		</view>
		<image v-else class="cover-preview" :src="url" mode="aspectFit" />
		<view v-if="url.length" class="actions">
			<view class="action-btn" @click="toEditCover">
				编辑
			</view>
			<view class="action-btn" @click="handlePreview(url)">
				预览
			</view>
		</view>
		<view v-if="mode === 2" class="input-box">
			<text>封面文字</text>
			<input class="input-style" v-model="coverTxt" type="text" :maxlength="14" placeholder="最多输入14个文字" />
		</view>

		<u-modal :show="showInputTxt" title="请填写封面文字" :showCancelButton="true" cancelColor="#000000" confirmColor="#ff8a07"
			@cancel="closeInputTxt" @confirm="confirmInputTxt">
			<view class="slot-content">
				<input class="input-style" v-model="modalCoverTxt" type="text" :maxlength="14" placeholder="最多输入14个文字" />
			</view>
		</u-modal>
		<u-modal :show="showToEdit" title="提示" :showCancelButton="true" content="设置文件首页为封面" cancelColor="#000000"
			confirmColor="#ff8a07" @cancel="showToEdit = false" @confirm="confirmCover({mode: 2})">
		</u-modal>
	</view>
</template>

<script>
	import {
		previewFile,
		toPromise,
		uploadFile,
		uploadWechat
	} from '@/utils/util'
	import {
		BASE_URL,
		PYTHON_URL
	} from '@/config/request'
	export default {
		name: 'EditCover',
		props: {
			// 图片地址
			url: {
				type: String,
				default: ''
			},
			coverUrl: {
				type: String,
				default: ''
			},
			// 初始文本
			text: {
				type: String,
				default: null
			},
			mode: {
				type: Number,
				default: 2, // 2 文字封面 4 图片封面
			},
		},
		emits: ['upload'],
		data() {
			return {
				modalCoverTxt: null,
				coverTxt: null,
				showInputTxt: false,
				showToEdit: false,
			}
		},
		watch: {
			mode() {
				// 有封面停止自动跳转
				if (this.url)
					return
				this.toEditCover()
			},
			text(nVal) {
				if (nVal && !this.coverTxt && nVal !== this.coverTxt) {
					this.coverTxt = nVal
				}
			},
		},
		onLoad() {},
		methods: {
			toEditCover() {
				if (this.mode === 2) {
					// 文本为空
					if (!this.coverTxt)
						return this.showInputTxt = true
					this.$navTo('pages/indexs/doc/cover_preview', {
						text: this.coverTxt,
						coverType: 2,
					})
				} else if (this.mode === 3) {
					if (!this.coverUrl)
						return this.$showToast('未解析出封面，请重试')
					if (this.url)
						return this.confirmCover()
					this.showToEdit = true
				} else if (this.mode === 4) { // 选择图片
					if (this.url)
						return this.$navTo('pages/indexs/doc/cover_preview', {
							url: this.url,
							coverType: 1,
						})
					uni.showActionSheet({
						itemList: ['从微信选择', '从相册选择'],
						success: async ({
							tapIndex
						}) => {
							try {
								let url = null
								if (tapIndex === 0) {
									// 从微信选择
									const selectedImg = await uploadWechat('image', 1)
									const uploadRes = await uploadFile(selectedImg.fileList[0], false)
									url = uploadRes.result.path
								} else if (tapIndex === 1) {
									// 从相册选择
									const selectedImg = await toPromise(uni.chooseImage, {
										count: 1,
										sizeType: ['original'],
										sourceType: ['album']
									})
									const uploadRes = await uploadFile(selectedImg.tempFilePaths[0], false)
									url = uploadRes.result.path
								}
								this.$navTo('pages/indexs/doc/cover_preview', {
									url: BASE_URL + url,
									coverType: 1,
								})
							} catch (err) {
								console.log('toEditCover= ', err);
								// this.$showToast('选择失败')
							}
						}
					})
				}
			},
			confirmCover(config) {
				this.$navTo('pages/indexs/doc/cover_preview', {
					url: this.url ? this.url : this.coverUrl,
					coverType: 1,
					...config
				})
				this.showToEdit = false
			},
			confirmInputTxt() {
				this.coverTxt = this.modalCoverTxt
				this.showInputTxt = false
				if (this.coverTxt) this.toEditCover()
			},
			closeInputTxt() {
				this.modalCoverTxt = null
				this.showInputTxt = false
			},
			handlePreview(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.add-cover {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		width: 450rpx;
		height: 290rpx;
		border-radius: 10rpx;
		border: 2rpx solid #d0d0d0;
		background: #ffffff;

		>image {
			width: 36rpx;
			height: 36rpx;
		}

		>text {
			margin-top: 20rpx;
			color: #adadad;
			font-size: 24rpx;
		}
	}

	.cover-preview {
		margin: 0 auto;
	}

	.actions {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 15rpx;
	}

	.action-btn {
		margin-top: 15rpx;
		width: 90rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 10rpx;
		border: 2rpx solid #ff9c24;
		background: #ffffff;
		color: #ff9c24;
		text-align: center;
		font-size: 28rpx;

		&:last-child {
			margin-left: 40rpx;
		}
	}

	.input-style {
		padding: 0 6rpx;
		width: 100%;
		border-bottom: 2rpx solid #f3f3f3;
		color: #000000;
		font-size: 28rpx;
	}

	.input-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;

		>text {
			color: #909090;
			font-size: 28rpx;
		}

		>input {
			width: 430rpx;
			text-align: right;
		}
	}

	.slot-content {
		padding-top: 40rpx;
		width: 100%;
	}
</style>